<template>
  <div class="login">
    <div class="login_form">
      <JForm @submitform="toSubmit">
        <JFormItem :rules="usernameRules" v-model="usernameText" placeholder="请输入账号" :lable="'账号'"></JFormItem>
        <JFormItem :rules="passwordRules" v-model="passwordText" placeholder="请输入密码" :lable="'密码'" type="password"></JFormItem>
        <template #Footer>
          <button class="defaultBtn primary mybtn">立即登录</button>
        </template>
      </JForm>
    </div>
  </div>
</template>

<script lang="ts">
import {defineComponent,ref} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
import JForm from '../components/form/Jfrom.vue'
import JFormItem,{RulesProp} from '../components/form/JFormItem.vue'
export default defineComponent({
  components:{
    JForm,
    JFormItem
  },
  setup(){
    const router = useRouter()
    const store = useStore()
    const usernameText = ref('')
    const passwordText = ref('')
    const usernameRules:RulesProp = [
      {type:'require',message:'账号不能为空哦'},
      {type:'userlimit',message:'请输入6-12位字符'},
      // {type:'email',message:'请输入正确的电子邮箱'}
    ]
    const passwordRules:RulesProp = [
      {type:'require',message:'密码不能为空哦'},
    ]
    const toSubmit = (e:boolean)=>{
      console.log('login',e)
      if(e === true){
        router.push('/')
        store.commit('login')
      }
    }
    return {
      usernameText,
      passwordText,
      toSubmit,
      passwordRules,
      usernameRules
    }
  }
})
</script>

<style lang="less" scoped>
.login_form{
  width: 300px;
  margin: 0 auto;
  height: 100vh;
}
.mybtn{
  margin: 0 auto;
}
</style>